<template>
  <div class="main">
    <div class="title">方案列表</div>
    <div class="headerInput">
      <div></div>
      <a-form layout="inline" style="width:100%">
        <a-form-item label="SolutionName">
          <a-input placeholder v-model.trim="DSloution" allowClear />
        </a-form-item>
        <a-form-item label="Section">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DSection"
          >
            <a-select-option
              v-for="(item, index) in SectionList"
              :key="index"
              :value="item.name"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Mother Project">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DMotherProject"
          >
            <a-select-option
              v-for="(item, index) in MotherProjectList"
              :key="index"
              :value="item.name"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Platform">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DPlatform"
          >
            <a-select-option
              v-for="(item, index) in PlatformList"
              :key="index"
              :value="item.name"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="Department">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DDeptId"
          >
            <a-select-option
              v-for="(item, index) in DepartmentInfo"
              :key="index"
              :value="item.DeptId"
            >{{ item.DeptName }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-form layout="inline" style="margin-top:30px;">
        <a-form-item label="Process/Station">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="DStation"
          >
            <a-select-option
              v-for="(item, index) in ProcessList"
              :key="index"
              :value="item.name"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="Project Leader">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            allowClear
            v-model="Dleader"
          >
            <a-select-option
              v-for="(item, index) in LeaderInfo"
              :key="index"
              :value="item.ProjectLeader"
            >{{ item.ProjectLeader }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="Due Date">
          <a-range-picker @change="onDateChange" v-model="selectDateMoment" />
        </a-form-item>

        <a-form-item class="ml150">
          <a-button type="primary" icon="search" @click="search">Search</a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="danger" @click="add">
            <a-icon type="plus-circle" />Add
          </a-button>
        </a-form-item>
        <a-form-item class="ml50">
          <a-button type="primary" @click="reset">
            <a-icon type="delete" />Reset
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="tableSection">
      <a-table :data-source="tableData" :customRow="clickKindTable" :pagination="false">
        <a-table-column
          key="Solutuions"
          title="SolutuionName"
          data-index="SubAppsSolutions"
          ellipsis="true"
        />
        <a-table-column key="Section" title="Section" data-index="Section" />
        <a-table-column key="MotherProject" title="MotherProject" data-index="MotherProject" />
        <a-table-column key="Department" title="Department" data-index="DeptName" />
        <a-table-column key="Station" title="Process/Station" data-index="ProcessStation" />
        <a-table-column key="Cost" title="Cost of Investment" data-index="CostofInvestment" />
        <a-table-column key="ProjectLeader" title="Project Leader" data-index="ProjectLeader" />
        <a-table-column key="DueDate" title="DueTime" data-index="DueDate" />
        <a-table-column key="action" title="Action">
          <template slot-scope="text, record">
            <span>
              <a-button type="primary" @click="editMoudule(text,record)" size="small">Edit</a-button>
              <a-button
                type="primary"
                @click="delMoudule(text,record)"
                class="mr30"
                size="small"
              >Delete</a-button>
            </span>
          </template>
        </a-table-column>
      </a-table>

      <a-pagination
        v-model="currentPage"
        show-size-changer
        show-quick-jumper
        :page-size.sync="pageSize"
        :total="totalCount"
        @showSizeChange="changePage"
        @change="changePage"
        class="pagination"
      />
    </div>

    <!-- 弹窗部分 :maskClosable="false" -->
    <a-modal
      v-model="moudelVisible"
      :title="ModalTitle"
      @ok="handleOk"
      @cancel="cancleSubmit"
      :width="1600"
      destroyOnClose
    >
      <div class="modalContent">
        <a-tabs type="card" class="tabBox" @change="changeTabs">
          <a-tab-pane key="1" tab="Common">
            <div>
              <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="Section" class="selectClass">
                  <a-select
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    allowClear
                    v-model="Section"
                    @search="getSectionSearch"
                  >
                    <a-select-option
                      v-for="(item, index) in SectionList"
                      :key="index"
                      :value="item.name"
                    >{{ item.name }}</a-select-option>
                  </a-select>
                  <!-- <a-button type="primary" @click="addSection">Add</a-button> -->
                </a-form-item>
                <a-form-item label="MotherProject">
                  <a-select
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    allowClear
                    v-model="MotherProject"
                    @search="getMSearch"
                    class="selectWidth"
                  >
                    <a-select-option
                      v-for="(item, index) in MotherProjectList"
                      :key="index"
                      :value="item.name"
                    >{{ item.name }}</a-select-option>
                  </a-select>
                  <a-button type="primary" @click="addMotherProject">Add</a-button>
                </a-form-item>
                <a-form-item label="Platform">
                  <a-select
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    allowClear
                    v-model="Platform"
                    @search="getPlatfromSearch"
                    class="selectWidth"
                  >
                    <a-select-option
                      v-for="(item, index) in PlatformList"
                      :key="index"
                      :value="item.name"
                    >{{ item.name }}</a-select-option>
                  </a-select>
                  <a-button type="primary" @click="addPlatformList">Add</a-button>
                </a-form-item>

                <a-form-item label="Department">
                  <a-select
                    v-model="DeptId"
                    allowClear
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                  >
                    <a-select-option
                      v-for="(item, index) in DepartmentInfo"
                      :key="index"
                      :value="item.DeptId"
                    >{{ item.DeptName }}</a-select-option>
                  </a-select>
                </a-form-item>
                <!-- 以上选择框 -->
                <a-form-item label="SolutionName">
                  <a-input v-model="SubAppsSolutions " />
                </a-form-item>

                <a-form-item label="ProjectCode">
                  <a-input v-model.trim="ProjectCode " />
                </a-form-item>
                <a-form-item label="Description">
                  <a-textarea v-model="Description " />
                </a-form-item>
                <a-form-item label="Status">
                  <a-input v-model.trim="Status" />
                  <!-- 此处check -->
                </a-form-item>
                <a-form-item label="ProcessStation">
                  <a-input v-model="ProcessStation " />
                </a-form-item>
                <!-- <a-form-item label="GlobalRegionalSiteSolutions">
                  <a-input v-model="GlobalRegionalSiteSolutions " />
                </a-form-item>-->
                <a-form-item label="BenefitType">
                  <a-input v-model="BenefitType " />
                </a-form-item>
                <a-form-item label="BenefitComments">
                  <a-textarea v-model="BenefitComments " />
                </a-form-item>
                <a-form-item label="CostofInvestment">
                  <a-input v-model="CostofInvestment " />
                </a-form-item>
                <a-form-item label="RealizedSavingsAnnual">
                  <a-input v-model="RealizedSavingsAnnual " />
                </a-form-item>
                <a-form-item label="ROIYear">
                  <a-input v-model="ROIYear " />
                </a-form-item>
                <a-form-item label="CostCategory">
                  <a-input v-model="CostCategory " />
                </a-form-item>
                <a-form-item label="ProjectLeader">
                  <a-input v-model="ProjectLeader " />
                </a-form-item>
                <a-form-item label="SME">
                  <a-input v-model.trim="SME " />
                </a-form-item>
                <!-- <a-form-item label="CoreTeam">
                  <a-input v-model="CoreTeam " />
                </a-form-item>-->
                <a-form-item label="IT">
                  <a-input v-model="IT " />
                </a-form-item>
                <a-form-item label="POCWC">
                  <a-input v-model="POCWC " />
                </a-form-item>
                <a-form-item label="DueDate">
                  <a-date-picker @change="changeDueData" v-model="DueDate" />
                </a-form-item>
                <a-form-item label="Remark">
                  <a-textarea v-model="Remark "></a-textarea>
                </a-form-item>
                <!-- <a-form-item label="ProjectLinkageAppOrSystem">
                  <a-input v-model="ProjectLinkageAppOrSystem " />
                </a-form-item>-->
                <a-form-item label="PriorityOfImplement">
                  <a-input v-model="PriorityOfImplement " />
                </a-form-item>

                <a-form-item label="SchemeImage">
                  <imgUpload
                    @uploadFileList="uploadFileList"
                    :imageArr="SchemeImage"
                    :doType="doType"
                  ></imgUpload>
                </a-form-item>

                <a-form-item label="Video">
                  <videoUpload
                    @getFileHttpUrl="getFileHttpUrl"
                    :fileUrl="Video"
                    :fileType="fileType"
                  ></videoUpload>
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="Detail">
            <Editor @change="getDetailWordHtml" :wordHtml="DetailWordHtml"></Editor>
          </a-tab-pane>

          <a-tab-pane key="3" tab="Price">
            <EditScheme :SchemeId="SchemeId" :type="doType" :JPB="JPB" @getJPB="getJPB"></EditScheme>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Editor from '@/components/Editor/commonWangEditor'
import EditScheme from '@/pageModule/scheme/editScheme'
import imgUpload from '@/components/upload/imgUpload'
import videoUpload from '@/components/upload/VideoUploadFile'

export default {
  data() {
    return {
      DeptId: '',
      searchText: '',
      tableData: [],
      doType: '',
      totalCount: 0,
      currentPage: 1,
      pageSize: 10,
      Platform: '',
      SectionList: [],
      Solutions: '',
      DepartmentInfo: [],
      ProjectLeaderInfo: [],
      startDate: '',
      endDate: '',
      DueDate: '',
      LeaderInfo: [],
      SchemeId: '',
      SubAppsSolutions: '',
      ProcessStation: '',
      CostofInvestment: '',
      ProjectLeader: '',
      moudelVisible: false,
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      MotherProjectList: [],
      PlatformList: [],
      ProcessList: [],
      solutionMapList: [],
      // 搜索条件
      DSection: '',
      DMotherProject: '',
      DPlatform: '',
      DSloution: '',
      DDeptId: '',
      DStation: '',
      Dleader: '',
      DStartDate: '',
      DEndDate: '',
      selectDateList: [],
      selectDateMoment: [],
      tabIndex: 1,
      DetailWordHtml: '',
      schemeInfo: [],
      kindIdList: [],
      sub_total: [],
      totalAmount: 0,
      DetailedInformation: [],
      Summary: '',
      imageArr: [],
      randomSchemeId: '',
      // commom 部分  参数
      Section: '',
      MotherProject: '',
      MotherProjectCode: '',
      SubSequenceCode: '',
      LH20: '',
      C: '',
      O: '',
      M: '',
      E: '',
      ProjectCode: '',
      Description: '',
      Workstreams: '',
      Status: '',

      GlobalRegionalSiteSolutions: '',
      BenefitType: '',
      BenefitComments: '',
      RealizedSavingsAnnual: '',
      ROIYear: '',
      CostCategory: '',
      SME: '',
      CoreTeam: '',
      IT: '',
      POCWC: '',
      Remark: '',
      ProjectLinkageAppOrSystem: '',
      PriorityOfImplement: '',
      WeeklyStatus: '',
      ProjectARS: '',
      ProjectReport: '',
      Satisfaction: '0',
      JPB: '',
      SchemeImage: [],
      Video: '',
      Details: '',
      IsSME: false,
      BrowseTimes: '',
      CreateBy: '',
      IsPresentActivity: '',
      PraiseTimes: '',
      DDateList: [],
      inputMotherProject: '',
      inputSection: '',
      inputPlatform: '',
      DeptName: '',
      fileType: 'video',
    }
  },
  watch: {
    tableData(val) {
      console.log('tableData :>> ', val)
    },
    JPB(val) {
      if (!val) {
        this.JPB = 0
      }
    },
    MotherProject(val) {
      console.log('val :>> ', val)
    },
    DDeptId() {
      this.getTableData()
    },
    DStation() {
      this.getTableData()
    },
    Dleader() {
      this.getTableData()
    },
    DPlatform() {
      this.getTableData()
    },
    DMotherProject() {
      this.getTableData()
    },
    DSection() {
      this.getTableData()
    },
    DSloution() {
      this.debounce()
    },
  },
  components: {
    Editor,
    EditScheme,
    imgUpload,
    videoUpload,
  },

  created() {
    this.getTableData()
    this.getSomeDetailsInfo()
    this.getDeptInfo()
    this.randomSchemeId = this.getUniqueId(20)
    this.getDeptInfo()
    this.getLeaderInfo()
  },
  methods: {
    debounce() {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          this.getTableData()
          timer = null
        }, 1000)
      }
    },
    addMotherProject() {
      this.MotherProjectList.push(this.inputMotherProject)
      this.MotherProject = this.inputMotherProject
    },
    addSection() {
      this.SectionList.push(this.inputSection)
      this.Section = this.inputSection
    },
    addPlatformList() {
      console.log('this.inputPlatform :>> ', this.inputPlatform)
      this.PlatformList.push(this.inputPlatform)
      this.Platform = this.inputPlatform
    },
    getMSearch(e) {
      console.log('egetMSearch:>> ', e)
      this.inputMotherProject = e.trim()
    },
    getSectionSearch(e) {
      this.inputSection = e.trim()
    },
    getPlatfromSearch(e) {
      this.inputPlatform = e.trim()
    },
    getJPB(e) {
      if (!e) {
        this.JPB = 0
      } else {
        this.JPB = e
      }
    },
    getFileHttpUrl(e) {
      const that = this
      console.log('父组件接收视频 :>> ', e)
      this.Video = e
    },
    getLeaderInfo() {
      const a = {
        method: 'GetDataItems_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          FieldName: 'ProjectLeader',
          TableName: 'ShpScheme',
        },
      }
      this.$post(a).then((result) => {
        this.LeaderInfo = result.data.length > 0 ? result.data : []
      })
    },
    changeDueData(date, dateString) {
      console.log('value :>> ', dateString)
      this.DueDate = dateString
    },
    uploadFileList(e) {
      console.log('图片 :>> ', e)
      this.SchemeImage = []
      e.fileList.map((item) => {
        if (item.response && item.response.data.fileName) {
          this.SchemeImage.push(item.response.data.fileName)
        } else if (item.url) {
          this.SchemeImage.push(item.url)
        }
      })
    },

    // 生成本页面唯一的方案id
    getUniqueId(randomLength) {
      return Number(
        Math.random().toString().substr(3, randomLength) + Date.now()
      ).toString(36)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      // this.selectedRowKeys = selectedRowKeys
      console.log('row', selectedRows) //选中行的数据
      const index = this.getIndex(this.kindIdList, selectedRows[0].KindId)
      console.log(index, 'index')
      let num = 0
      for (const rowSingle of selectedRows) {
        console.log('rowSingle :>> ', rowSingle.KindId)
        num = num + rowSingle.Price * rowSingle.Quantity
        this.sub_total[index] = num
      }
      // this.sub_total[index] = pk.toDecimal2(this.sub_total[index])
      this.totalAmount = this.sub_total.reduce((x, y) => {
        return x + y
      })
    },
    setRowClassName(row) {},
    // table点击当前行
    rowClick(row) {
      // console.log(text, record)
    },
    getDetailWordHtml(e) {
      console.log('e :>> ', e)
      this.Details = e
    },
    changeTabs(e) {
      console.log('changeTabs :>> ', e)
      this.tabIndex = Number(e)
    },
    reset() {
      this.DSection = ''
      this.DMotherProject = ''
      this.DPlatform = ''
      this.DSloution = ''
      this.DDeptId = ''
      this.DStation = ''
      this.Dleader = ''
      this.DStartDate = ''
      this.DEndDate = ''
      this.selectDateList[0] = ''
      this.selectDateList[1] = ''
      this.selectDateMoment = []
      this.DDateList = ''
      this.debounce()
    },
    setFormData(data) {
      console.log('setFormData :>> ', data)
      this.Section = data.Section
      this.MotherProject = data.MotherProject
      this.SubAppsSolutions = data.SubAppsSolutions
      this.DeptName = data.DeptName
      this.DeptId = data.DeptId
      this.ProcessStation = data.ProcessStation
      this.CostofInvestment = data.CostofInvestment
      this.ProjectLeader = data.ProjectLeader
      this.DueDate = data.DueDate
      this.MotherProjectCode = data.MotherProjectCode
      this.Platform = data.Platform
      this.SubSequenceCode = data.SubSequenceCode
      this.C = data.C
      this.O = data.O
      this.M = data.M
      this.E = data.E
      this.ProjectCode = data.ProjectCode
      this.Description = data.Description
      this.Workstreams = data.Workstreams
      this.Status = data.Status
      this.GlobalRegionalSiteSolutions = data.GlobalRegionalSiteSolutions
      this.BenefitType = data.BenefitType
      this.BenefitComments = data.BenefitComments
      this.RealizedSavingsAnnual = data.RealizedSavingsAnnual
      this.ROIYear = data.ROIYear
      this.CostCategory = data.CostCategory
      this.SME = data.SME
      this.CoreTeam = data.CoreTeam
      this.IT = data.IT
      this.POCWC = data.POCWC
      this.Remark = data.Remark
      this.ProjectLinkageAppOrSystem = data.ProjectLinkageAppOrSystem
      this.PriorityOfImplement = data.PriorityOfImplement
      this.WeeklyStatus = data.WeeklyStatus
      this.ProjectARS = data.ProjectARS
      this.ProjectReport = data.ProjectReport
      this.Satisfaction = data.Satisfaction
      this.JPB = data.JPB
      this.SchemeImage = data.SchemeImage
      this.Video = data.Video
      this.Details = data.Details
      this.IsSME = data.IsSME
      if (data.Details) {
        this.DetailWordHtml = data.Details.split('\\').join('')
      } else {
        this.DetailWordHtml = ''
      }
      this.$forceUpdate()
      this.moudelVisible = true
    },
    // 方案的详细信息
    getSchemeDetail() {
      const that = this
      const a = {
        method: 'ShpSchemeInfo_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.SchemeId,
        },
      }
      this.$post(a).then((result) => {
        this.schemeInfo = result.data
        console.log('this.schemeInfo :>> ', this.schemeInfo)
        // this.Summary = this.schemeInfo.Summary
        this.Video = result.data.Video
        this.schemeInfo.DueDate = result.data.DueDate.replace('T', ' ')
        console.log('this.DueDate :>> ', this.DueDate)
        this.$forceUpdate()
        console.log('this.Video :>> ', this.Video)
        this.imageArr = this.schemeInfo.SchemeImage
          ? eval('(' + this.schemeInfo.SchemeImage + ')')
          : ''
        this.DetailedInformation = this.schemeInfo.Introduction
          ? this.schemeInfo.Introduction.split('\\').join('')
          : ''
        this.schemeInfo.shpSchemeRecommend =
          this.schemeInfo.shpSchemeRecommend &&
          this.schemeInfo.shpSchemeRecommend.length > 0
            ? this.schemeInfo.shpSchemeRecommend.map((item) => {
                item.SchemeImage = eval('(' + item.SchemeImage + ')')
                return item
              })
            : []
        if (
          this.schemeInfo.shpSchemeSME &&
          this.schemeInfo.shpSchemeSME.length > 0
        ) {
          this.schemeInfo.shpSchemeSME.map((item) => {
            item.SchemeImage = eval('(' + item.SchemeImage + ')')
            return item
          })
        }

        this.schemeInfo.SchemeImage = this.schemeInfo.SchemeImage
          ? eval('(' + this.schemeInfo.SchemeImage + ')')
          : ''

        // 表单赋值区域
        this.setFormData(this.schemeInfo)

        // this.DetailWordHtml = result.data.Details.split('\\').join('')
      })
    },
    getDeptInfo() {
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },
    cancleSubmit() {
      // 关闭弹窗 清空数据 避免打开窗口发生切换数据的不良体验
      this.clearCommon()
      this.SchemeId = ''
      this.DetailWordHtml = ''
    },
    onDateChange(date, dateString) {
      console.log(date, dateString)
      this.selectDateMoment = date
      this.selectDateList = dateString
      if (dateString[0] && dateString[1]) {
        this.DStartDate = dateString[0] + ' 0:00:00'
        this.DEndDate = dateString[1] + ' 23:59:59'
        this.DDateList = ''
        this.DDateList = '[' + this.DStartDate + ',' + this.DEndDate + ']'
      } else {
        this.DDateList = ''
      }
      console.log('this.DDateList :>> ', this.DDateList)
      this.debounce()
    },
    sectionChange(value) {
      this.Section = value
    },
    motherProjectChange(value) {
      this.MotherProject = value
    },
    clickKindTable(record, index) {
      return {
        on: {
          click: () => {},
        },
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getTableData() {
      const a = {
        method: 'ShpScheme_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        orderByList: 'SubAppsSolutions',
        fieldList:
          'Section,MotherProject,DeptId,DeptName,SchemeId,ProjectLeader,CreateTime,SchemeImage,SubAppsSolutions,Satisfaction,BrowseTimes,CostofInvestment,ProcessStation,DueDate',
        datas: {
          Section: this.DSection,
          DeptId: this.DDeptId,
          Platform: this.DPlatform,
          SubAppsSolutions: this.DSloution ? '%' + this.DSloution + '%' : '',
          DueDate: this.DDateList,
          MotherProject: this.DMotherProject,
          ProjectLeader: this.Dleader,
          ProcessStation: this.DStation,
        },
      }
      this.$post(a).then((result) => {
        console.log('this.tableData  :>> ', this.tableData)
        this.tableData = result.data
        this.totalCount = result.count > 0 ? result.count : 0
      })
    },
    search() {
      this.currentPage = 1

      this.getTableData()
    },
    add() {
      this.moudelVisible = true
      this.doType = 'add'
      // 清空参数
      this.ModalTitle = 'Add Scheme'
      this.clearCommon()
    },
    clearCommon() {
      this.Section = ''
      this.MotherProject = ''
      this.SubAppsSolutions = ''
      this.DeptId = ''
      this.DeptName = ''
      this.ProcessStation = ''
      this.CostofInvestment = ''
      this.ProjectLeader = ''
      this.DueDate = ''
      this.MotherProjectCode = ''
      this.Platform = ''
      this.SubSequenceCode = ''
      this.LH20 = ''
      this.C = ''
      this.O = ''
      this.M = ''
      this.E = ''
      this.ProjectCode = ''
      this.Description = ''
      this.Workstreams = ''
      this.Status = ''
      this.GlobalRegionalSiteSolutions = ''
      this.BenefitType = ''
      this.BenefitComments = ''
      this.RealizedSavingsAnnual = ''
      this.ROIYear = ''
      this.CostCategory = ''
      this.SME = ''
      this.CoreTeam = ''
      this.IT = ''
      this.POCWC = ''
      this.Remark = ''
      this.ProjectLinkageAppOrSystem = ''
      this.PriorityOfImplement = ''
      this.WeeklyStatus = ''
      this.ProjectARS = ''
      this.ProjectReport = ''
      this.Satisfaction = ''
      this.JPB = 0
      this.SchemeImage = []
      this.Video = ''
      this.Details = ''
      this.IsSME = ''
      this.CostofInvestment = ''
      this.$forceUpdate()
    },
    // 编辑模组
    async editMoudule(item, index) {
      await this.clearCommon()
      this.doType = 'edit'
      this.ModalTitle = 'Edit Scheme'
      this.ModuleTipIndex = index
      console.log('item :>> ', item)
      this.DetailWordHtml = item.Details
      this.SchemeId = item.SchemeId
      await this.getSchemeDetail()
    },
    //删除模组
    delMoudule(item, index) {
      console.log(item, 'del')
      const that = this
      this.doType = 'del'
      const a = {
        method: 'ShpScheme_Del',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          SchemeId: item.SchemeId,
        },
      }
      this.$confirm({
        title: 'warm prompt',
        content: 'Do you want to Delete this data?',
        onOk() {
          that.$post(a).then((result) => {
            if (result.code == 0) {
              that.$message.success('successfully delete!')
              that.getTableData()
            }
          })
        },
      })
    },
    changePage(current, pageSize) {
      console.log('current :>> ', current)
      this.currentPage = current
      this.pageSize = pageSize
      this.getTableData()
    },

    addInfo() {
      const a = {
        method: 'ShpScheme_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          Section: this.Section,
          MotherProject: this.MotherProject,
          SubAppsSolutions: this.SubAppsSolutions,
          DeptId: this.DeptId,
          ProcessStation: this.ProcessStation,
          CostofInvestment: this.CostofInvestment,
          ProjectLeader: this.ProjectLeader,
          DueDate: this.DueDate,
          MotherProjectCode: this.MotherProjectCode,
          Platform: this.Platform,
          SubSequenceCode: this.SubSequenceCode,
          LH20: this.LH20,
          ProjectCode: this.ProjectCode,
          Description: this.Description,
          Workstreams: this.Workstreams,
          Status: this.Status,
          GlobalRegionalSiteSolutions: this.GlobalRegionalSiteSolutions,
          BenefitType: this.BenefitType,
          BenefitComments: this.BenefitComments,
          RealizedSavingsAnnual: this.RealizedSavingsAnnual,
          ROIYear: this.ROIYear,
          CostCategory: this.CostCategory,
          SME: this.SME,
          CoreTeam: this.CoreTeam,
          IT: this.IT,
          POCWC: this.POCWC,
          Remark: this.Remark,
          ProjectLinkageAppOrSystem: this.ProjectLinkageAppOrSystem,
          PriorityOfImplement: this.PriorityOfImplement,
          WeeklyStatus: this.WeeklyStatus,
          ProjectARS: this.ProjectARS,
          ProjectReport: this.ProjectReport,
          Satisfaction: this.Satisfaction,
          JPB: this.JPB,
          SchemeImage: this.SchemeImage,
          Video: this.Video,
          Details: this.Details,
          IsSME: this.IsSME,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getTableData()
        }
        this.moudelVisible = false
      })
    },
    editInfo() {
      const a = {
        method: 'ShpScheme_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          SchemeId: this.SchemeId,
          Section: this.Section,
          DeptId: this.DeptId,
          MotherProject: this.MotherProject,
          SubAppsSolutions: this.SubAppsSolutions,
          ProcessStation: this.ProcessStation,
          CostofInvestment: this.CostofInvestment,
          ProjectLeader: this.ProjectLeader,
          DueDate: this.DueDate,
          MotherProjectCode: this.MotherProjectCode,
          Platform: this.Platform,
          SubSequenceCode: this.SubSequenceCode,
          LH20: this.LH20,
          ProjectCode: this.ProjectCode,
          Description: this.Description,
          Workstreams: this.Workstreams,
          Status: this.Status,
          GlobalRegionalSiteSolutions: this.GlobalRegionalSiteSolutions,
          BenefitType: this.BenefitType,
          BenefitComments: this.BenefitComments,
          RealizedSavingsAnnual: this.RealizedSavingsAnnual,
          ROIYear: this.ROIYear,
          CostCategory: this.CostCategory,
          SME: this.SME,
          CoreTeam: this.CoreTeam,
          IT: this.IT,
          POCWC: this.POCWC,
          Remark: this.Remark,
          ProjectLinkageAppOrSystem: this.ProjectLinkageAppOrSystem,
          PriorityOfImplement: this.PriorityOfImplement,
          WeeklyStatus: this.WeeklyStatus,
          ProjectARS: this.ProjectARS,
          ProjectReport: this.ProjectReport,
          Satisfaction: this.Satisfaction,
          JPB: this.JPB,
          SchemeImage: this.SchemeImage,
          Video: this.Video,
          Details: this.Details,
          IsSME: this.IsSME,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('updated successfully!')
          this.getTableData()
        }
        this.moudelVisible = false
      })
    },
    handleOk() {
      if (!this.Section) {
        this.$message.warn('Please enter the Section')
        return
      } else if (!this.MotherProject) {
        this.$message.warn('Please enter the MotherProject')
        return
      } else if (!this.Platform) {
        this.$message.warn('Please enter the Platform')
        return
      } else if (!this.DeptId) {
        this.$message.warn('Please enter the Department')
        return
      } else if (!this.SubAppsSolutions) {
        this.$message.warn('Please enter the SolutionName')
        return
      }

      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
      // this.moudelVisible = false
    },
    getSomeDetailsInfo() {
      const a = {
        method: 'ShpSchemeType_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {},
      }
      this.$post(a).then((res) => {
        const data = res.data
        this.MotherProjectList = data.motherProject ? data.motherProject : []
        this.PlatformList = data.platform ? data.platform : []
        this.ProcessList = data.processStation ? data.processStation : []
        this.SectionList = data.section ? data.section : []
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import url('css/schemeList.less');
</style>